<script setup>
import { ref, onMounted } from 'vue'
const emit = defineEmits(['change'])
const props = defineProps({
  imageList: {
    type: Array,
    default: () => {
      return []
    },
  },
  // 图片张数
  imgCount: {
    type: Number,
    default: () => {
      return 6
    },
  },
  // 图片大小M
  imgSize: {
    type: Number,
    default: () => {
      return 3
    },
  },
  tips: {
    type: String,
    default: '上传图片!',
  },
})
const showList = ref([])
const previewImage = (current, urls) => {
  let res_urls = []
  urls.forEach((item, index) => {
    res_urls.push(item.path)
  })
  uni.previewImage({
    current: current.path,
    urls: res_urls,
  })
}
const toDel = async (index) => {
  let { cancel, confirm } = await uni.showModal({
    content: `请确认是否要删除图片`,
  })
  if (!confirm) return
  showList.value.splice(index, 1)
  emit('change', {
    imageList: showList.value,
  })
}
const chooseImage = async () => {
  const { tempFiles } = await uni.chooseImage({
    count: props.imgCount - showList.value.length, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  })
  // console.log(tempFiles, '55===')
  tempFiles.forEach((item) => {
    if (item.size / 1024 / 1024 > props.imgSize) {
      uni.showToast({
        title: `上传图片大小超过限制${props.imgSize}M`,
      })
      return
    } else {
      showList.value.push({ path: item.path })
    }
  })
  // console.log(showList.value, '64===')
  emit('change', {
    imageList: showList.value,
  })
}

onMounted(() => {
  showList.value = props.imageList
})
</script>

<template>
  <view>
    <view class="upload">
      <view class="item" v-for="(item, index) in showList" :key="index">
        <view @tap="toDel(index)" class="close">X</view>
        <image
          @tap="previewImage(item, showList)"
          :src="item.path"
          mode="aspectFill"
        />
      </view>
      <view @tap="chooseImage" class="item iten-btn">
        <image src="../../static/images/common/camera.png" mode="widthFix" />
      </view>
    </view>
    <view class="tips">{{ props.tips }}</view>
  </view>
</template>

<style lang="scss" scoped>
.upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .item {
    position: relative;
    width: 138rpx;
    height: 138rpx;
    margin: 0 20rpx 20rpx 0;
    .close {
      position: absolute;
      z-index: 9;
      right: -6rpx;
      top: -6rpx;
      width: 28rpx;
      height: 28rpx;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #858585;
      color: #ffffff;
    }
    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
  .item:nth-child(4n) {
    margin-right: 0;
  }
  .iten-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12rpx;
    border: 1rpx dashed rgba(0, 0, 0, 0.26);
    image {
      width: 44rpx;
    }
  }
}
.tips {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
}
</style>
